<template>
    <div class="box_alarm">
        <MoodalTitle :title="'实时问题TOP5'" />
        <div class="kaohe-box">
            <div class="kaohe-box-list" v-for="(item, Index) in topFiveList">
                <!-- 图片排名 -->
                <span>{{ item.type }}</span>
                <!-- 进度条 -->
                <div class="progress">
                    <p :style="{ width: item.sum }"></p>
                </div>
                <span style="color: #25E3FF;">{{ item.sum }}</span>
            </div>
        </div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import {   ZhShianalysis } from '@/api/zhangzi'
export default {
    components: { MoodalTitle },
    data() {
        return {
            topFiveList: [],
        }
    },
    mounted() {
        this.getProblemType()
    },
    methods: {
        async getProblemType() {
            const res = await ZhShianalysis.realTimeTopAPI()
            if (res.success) {
                this.topFiveList = res.data
            } else {
                this.$message.error(res.message)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 607px;
    height: 32.8rem !important;
    margin-bottom: 1.9rem;
}
.kaohe-box {
        width: 100%;
        height: calc(100% - 3.8rem);
        margin-top: 2rem;
        overflow: auto;

        .kaohe-box-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rem;

            &:last-child {
                margin-bottom: 0;
            }

            .icon {
                width: 2.6rem;
                height: 2.6rem;

                .image {
                    width: 100%;
                    height: 100%;
                }
            }

            span {
                display: inline-block;
                font-size: 1.6rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #C0D3D6;

                &:nth-child(1) {
                    color: #fff;
                    // width: 30.5rem;
                    overflow: hidden;
                }

                &:nth-child(2) {
                    width: 6.4rem;
                    overflow: hidden;
                    margin: 0 0 0 1rem;
                }

                &:nth-child(4) {
                    color: #25E3FF;
                }
            }

            .progress {
                flex: 1;
                height: 0.5rem;
                background: rgba(220, 251, 255, .2);
                margin: 0 1rem;

                p {
                    width: 50%;
                    height: 0.5rem;
                    background: #24DCF7;
                }
            }
        }
    }
</style>